<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layui/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="../../CSS/media.css">
    <title>云端环境</title>
    <style>
        .layui-col-space20{
            margin: 0px;
        }
        .tab ul li{
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 20px;
            cursor: pointer;
            /* border-bottom: 1px solid #c00; */
        }
        .active{
            border: 1px solid #2b98f0 !important;
            background: #fff !important;
        }
        .lineBox{
            width: 100%;
            height:600px;
            overflow: hidden;
        }
        .lineTitle{
            font-size: 20px;
            font-weight: 700;
        }
        .lineTxt{
            float: left;
            width: 15%;
            box-sizing: border-box;
            /* text-align: center; */
            padding-left: 5%;
            line-height: 140px;
            font-size: 16px;
            font-weight: 600;
        }
        .line{
            float: left;
            width:70%;
            height:600px;  
        }
        .bread{
            width:70%;
            height:600px;
            margin: 0 auto;
        }
        .chart{
            width: 100%;
            height:600px; 
        }
        .use{
            width: 100%;
            font-size: 16px;
            box-sizing: border-box;
            padding-left: 5%;
            margin: 10px 0 20px;
            font-weight: 600;
        }
        .none{
            display: none;
        }
    </style>
</head>
<body>
    <div class="layui-row cloudEnvironment">
        <div class="layui-col-md2 tab" style="background:rgba(184,184,184,0.3)">
            <ul>
                <li class="layui-this">cpu</li>
                <li>内存</li>
                <li>硬盘</li>
                <li>硬盘2</li>
                <li>网络</li>
            </ul>
        </div>
        <div class="layui-col-md10">
            <div class="layui-tab-content content">
                <div class="layui-tab-item">
                    <div class="lineTitle">cpu</div>
                    <div class="lineBox">
                        <div class="lineTxt">cpu使用率</div>
                        <div class="line">
                            <div class="chart" id="main"></div>
                        </div>
                    </div> 
                    <div class="use" id="cpuUtilization">利用率 <span></span></div>
                    <!-- <div class="use">进程 220 线程 2478</div> -->
                    <div class="use" id="cpuRun">正常运行时间 <span></span></div>
                </div>
                <div class="layui-tab-item">
                    <div class="lineTitle">内存</div>
                    <div class="lineBox">
                        <div class="lineTxt">内存使用量</div>
                        <div class="line">
                            <div class="chart" id="main1"></div>
                        </div>
                    </div> 
                    <div class="use" id="Mused">使用中 <span></span>GB</div>
                    <div class="use">已提交 <span id="MF">11.2</span>/<span id="MT">16.9</span>GB</div>
                </div>
                <div class="layui-tab-item">
                    <div class="lineTitle">硬盘使用情况</div>
                    <div class="lineBox">
                        <!-- <div class="lineTxt"></div> -->
                        <div class="bread">
                            <div class="chart" id="main2"></div>
                        </div>
                    </div> 
                    <!-- <div class="use">使用中 7.5GB</div>
                    <div class="use">已提交 11.2/16.9GB</div> -->
                </div>
                <div class="layui-tab-item">
                    <div class="lineTitle">硬盘使用情况</div>
                    <div class="lineBox">
                        <div class="bread">
                            <div class="chart" id="main3"></div>
                        </div>
                    </div> 
                </div>
                <div class="layui-tab-item">
                    <div class="lineTitle">网络</div>
                    <div class="lineBox">
                        <div class="lineTxt">吞吐量</div>
                        <div class="line">
                            <div class="chart" id="main4"></div>
                        </div>
                    </div> 
                    <div class="use">发送 200kbps</div>
                    <div class="use">接收 300kbps</div>
                </div>
            </div>
        </div> 
    </div> 
</body>
<script src="./../../JS/jquery-2.0.3.js"></script>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="./../../layui/lay/modules/layer.js"></script>
<script src="./../../JS/echarts/echarts.js"></script>
<script>
    layui.use('element', function () {
        var element = layui.element;

        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
    $(function () { 
        parent.parent.subscribe2()
    })
    var myChart;
    // tab切换
    $('.tab ul li').eq(0).addClass('active');
    $('.content div').eq(0).show().siblings('div').hide()
    $('.tab ul li').click(function () {
        // myChart.dispose(); //销毁所有实例
        $(this).addClass('active').siblings('li').removeClass('active');
        $('.content>div').eq($(this).index()).show().siblings('div').hide();
        if($(this).index() == 0){
            parent.parent.subscribe2()
        }else if($(this).index() == 1){
            parent.parent.subscribe3()
        }else if($(this).index() == 2){
            parent.parent.subscribe4()
        }else if($(this).index() == 3){
            parent.parent.subscribe5()
        }else if($(this).index() == 4){
            parent.parent.subscribe6()
        }
    })

    var cpudata = [];
    for(var i=0;i<60;i++){
        if(i === 59){
            cpudata.push('')  
        }else{
            cpudata.push('',)  
        }
    }
    // cpu
    function cpu(res) {
        var str= res.use.replace("%","");
        cpudata.push(str)
        if (true) {
            cpudata.shift();
        }
        var myChart = echarts.init(document.getElementById('main'));
        option = {
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [60,'','','','',55,'','','','',50,'','','','',45,'','','','',40,'','','','',35,'','','','',30,'','','','',25,'','','','',20,'','','','',15,'','','','',10,'','','','',5,'','','','',0]
                },
                yAxis: {
                    type: 'value',
                    // min: 0,
                    // max: 100
                },
                series: [
                    {
                        name: 'CPU使用率',
                        smooth:true,
                        type: 'line',
                        symbol:'none',
                        stack: '百分比',
                        // 线的颜色
                        itemStyle:{
                            color:'#309FEA'
                        },
                        // 线下的面积色
                        areaStyle:{
                            normal:{
                                color:'#309FEA'
                            }
                        },
                        data: cpudata
                    }
                ]
            };
        myChart.setOption(option);
        $('#cpuUtilization').find('span').text(res.use)
        $('#cpuRun').find('span').text(formatDuring(res.run))
     }
     // 内存
    var memorydata = [];
    for(var i=0;i<60;i++){
        if(i === 59){
            memorydata.push('')  
        }else{
            memorydata.push('',)  
        }
    }
    function memory(res) {
        memorydata.push((res.userd/1024/1024/1024).toFixed(2))
        if (true) {
            memorydata.shift();
        } 
        myChart = echarts.init(document.getElementById('main1'));
        option1 = {
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [60,'','','','',55,'','','','',50,'','','','',45,'','','','',40,'','','','',35,'','','','',30,'','','','',25,'','','','',20,'','','','',15,'','','','',10,'','','','',5,'','','','',0]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '内存使用率',
                        smooth:true,
                        type: 'line',
                        symbol:'none',
                        stack: '百分比',
                        // 线的颜色
                        itemStyle:{
                            color:'#309FEA'
                        },
                        // 线下的面积色
                        areaStyle:{
                            normal:{
                                color:'#309FEA'
                            }
                        },
                        data: memorydata
                    }
                ]
            };
        myChart.setOption(option1);
        $(window).on('resize', function () { //屏幕大小自适应，重置容器高宽
                myChart.resize();
        });
        $('#Mused').find('span').text((res.userd/1024/1024/1024).toFixed(2))
        $('#MF').text((res.free/1024/1024/1024).toFixed(2))
        $('#MT').text((res.total/1024/1024/1024).toFixed(2))
     }
    // 硬盘1
    var hardDate = [];
    function hardDisk1(res) {
        // console.log(res.files[0])
        hardDate = [
            {value:(res.files[0].diskUsed/1024/1024).toFixed(2), name: '已使用'},
            {value:(res.files[0].diskFree/1024/1024).toFixed(2), name: '未使用'},
        ]
        myChart = echarts.init(document.getElementById('main2')); 
        option2 = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                x: 'right',
                y:'center',
                // left: 'right',
                data: ['已使用', '未使用']
            },
            series: [
                {
                    name: res.files[0].devName.slice(0,1)+'盘',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: hardDate,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option2);
        $(window).on('resize', function () { //屏幕大小自适应，重置容器高宽
                myChart.resize();
        });
     }
    // 硬盘2
    var hardDate1 = []
    function hardDisk2(res) {
        console.log(res)
        var diskUsedSum = 0;    //已使用
        var diskFreeSum = 0;    //未使用
        var hardName = "";
        if(res.files.length>1){
            for(var i=1;i<res.files.length;i++){
                diskUsedSum += res.files[i].diskUsed
                diskFreeSum += res.files[i].diskFree
                if(i != res.files.length-1){
                    hardName += res.files[i].devName.slice(0,1)+'、'
                }else{
                    hardName += res.files[i].devName.slice(0,1)
                }
                
            }
        }
        hardDate1 = [
            {value:(diskUsedSum/1024/1024).toFixed(2), name: '已使用'},
            {value:(diskFreeSum/1024/1024).toFixed(2), name: '未使用'},
        ]
        myChart = echarts.init(document.getElementById('main3')); 
        option3 = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                x: 'right',
                y:'center',
                // left: 'right',
                data: ['已使用', '未使用']
            },
            series: [
                {
                    name: hardName+' 盘',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: hardDate1,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option3);
        $(window).on('resize', function () { //屏幕大小自适应，重置容器高宽
            myChart.resize();
        });
    }
    // 网络
    function network(res) { 
        // console.log(res)
        myChart = echarts.init(document.getElementById('main4'));
        option4 = {
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: 'CPU使用率',
                        smooth:true,
                        type: 'line',
                        stack: '百分比',
                        data: [40, 60, 80, 30, 70, 20, 100]
                    }
                ]
            };
        myChart.setOption(option4);
        $(window).on('resize', function () { //屏幕大小自适应，重置容器高宽
                myChart.resize();
        });
    }
    

    // 毫秒转化为天时分秒
    function formatDuring(mss) {
        var days = parseInt(mss / (1000 * 60 * 60 * 24));
        var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.round((mss % (1000 * 60)) / 1000);
        return days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 ";
    }
</script>
</html>
